import React, { useState } from "react";
import style from "./style.module.scss";
import { useAppDispatch } from "../../../store/hooks";
import { Notify } from "react-vant";
import register_hand from "../../../assets/images/image/hdpi/login_hand_03.png";
import emailIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_mail_n.png";
import lockIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_lock_n.png";
import hideIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_hide_password_n.png";
import showIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_show_password.png";
import invitationIcon from "../../../assets/images/icon/common resource/hdpi/register_icon_invitatiion_code_n.png";
import verificationIcon from "../../../assets/images/icon/common resource/hdpi/register_icon_verification_code_n.png";
import { useNavigate } from "react-router-dom";
import { regEmail } from "../../../regExp";
import { postHttp } from "../../../api";
import { regist } from "../../../store/user/userSlice";
import { MyResponseType } from "../../../types";

const postRegister = (value: { email: string }) =>
  postHttp("health/user/v1/sendOutEmailCode", value);

// 注册的参数类型
interface loginRawState {
  email: string;
  code: string;
  pwd1: string;
  pwd2: string;
  invitationCode?: string;
}

export const Index: React.FC = () => {
  const navigate = useNavigate();
  const [type1, setType1] = useState<string>("password");
  const [pwdIcon1, setPwdIcon1] = useState<string>(hideIcon);
  const [show1, setShow1] = useState<boolean>(false);
  const [type2, setType2] = useState<string>("password");
  const [pwdIcon2, setPwdIcon2] = useState<string>(hideIcon);
  const [show2, setShow2] = useState<boolean>(false);
  const [values, setValues] = useState<loginRawState>({
    email: "",
    code: "",
    pwd1: "",
    pwd2: "",
    invitationCode: "",
  });

  const dispatch = useAppDispatch();
  //  密码框内容是否显示 函数
  const changeType1 = () => {
    if (!show1) {
      setType1("text");
      setPwdIcon1(showIcon);
      setShow1(true);
    } else {
      setType1("password");
      setPwdIcon1(hideIcon);
      setShow1(false);
    }
  };

  const changeType2 = () => {
    if (!show2) {
      setType2("text");
      setPwdIcon2(showIcon);
      setShow2(true);
    } else {
      setType2("password");
      setPwdIcon2(hideIcon);
      setShow2(false);
    }
  };
  //  用户注册  函数
  const onRegister = (values: loginRawState) => {
    if (!values.code) {
      return Notify.show({ type: "danger", message: "验证码不可以为空" });
    }
    if (values.pwd1.trim() === "" || values.pwd2 === "") {
      return Notify.show({ type: "danger", message: "密码不可以为空" });
    }
    if (values.pwd1 !== values.pwd2) {
      return Notify.show({ type: "danger", message: "两次密码不一致" });
    }

    dispatch(regist({ ...values })).then((resp) => {
      const payload = resp.payload as MyResponseType;
      Notify.show({ type: "primary", message: payload.message });
      navigate("/login");
    });
  };

  const getCode = async () => {
    if (!regEmail.test(values.email)) {
      Notify.show({ type: "danger", message: "邮箱格式不正确" });
    }

    const { message, status } = await postRegister({ email: values.email });

    if (status === "0000") {
      Notify.show({ type: "success", message });
    }
  };

  return (
    <div className={style.register}>
      <img src={register_hand} alt="" className={style.hand} />
      <form className={style.content}>
        <div className={style.formItem_email}>
          <img src={emailIcon} alt="" className={style.emailIcon} />
          <input
            type="text"
            className={style.emailInp}
            placeholder="请输入邮箱"
            name="email"
            value={values.email}
            onChange={(e) =>
              setValues((values) => ({ ...values, email: e.target.value }))
            }
          />
          <button
            className={style.btn_code}
            type="button"
            onClick={() => getCode()}
          >
            获取验证码
          </button>
        </div>
        <div className={style.formItem_code}>
          <img
            src={verificationIcon}
            alt=""
            className={style.verificationIcon}
          />
          <input
            type="text"
            className={style.codeInp}
            placeholder="请输入验证码"
            name="code"
            value={values.code}
            onChange={(e) =>
              setValues((values) => ({ ...values, code: e.target.value }))
            }
          />
        </div>
        <div className={style.formItem_password1}>
          <img src={lockIcon} alt="" className={style.lockIcon} />
          <input
            type={type1}
            className={style.pwd1Inp}
            placeholder="请输入密码"
            autoComplete=""
            name="pwd1"
            value={values.pwd1}
            onChange={(e) =>
              setValues((values) => ({ ...values, pwd1: e.target.value }))
            }
          />
          <img
            src={pwdIcon1}
            alt=""
            className={style.hideIcon}
            onClick={() => changeType1()}
          />
        </div>
        <div className={style.formItem_password2}>
          <img src={lockIcon} alt="" className={style.lockIcon} />
          <input
            type={type2}
            className={style.pwd2Inp}
            placeholder="请再次输入密码"
            autoComplete=""
            name="pwd2"
            value={values.pwd2}
            onChange={(e) =>
              setValues((values) => ({ ...values, pwd2: e.target.value }))
            }
          />
          <img
            src={pwdIcon2}
            alt=""
            className={style.hideIcon}
            onClick={() => changeType2()}
          />
        </div>
        <div className={style.formItem_invitationCode}>
          <img src={invitationIcon} alt="" className={style.invitatiionIcon} />
          <input
            type="text"
            className={style.invitationCodeInp}
            placeholder="请输入邀请码"
            name="invitationCode"
            value={values.invitationCode}
            onChange={(e) =>
              setValues((values) => ({
                ...values,
                invitationCode: e.target.value,
              }))
            }
          />
          <span className={style.optional}>选填</span>
        </div>
        <button
          type="button"
          className={style.btn_login}
          onClick={() => onRegister(values)}
        >
          注册
        </button>
      </form>
      <div className={style.shadow_one}></div>
      <div className={style.shadow_two}></div>
    </div>
  );
};

export default Index;
